<template>

    <div class="code-mirror-div">

        <div class="tool-bar" style="display: none;">

            <span>请选择主题</span>

            <el-select v-model="cmTheme" placeholder="请选择" size="small" style="width:150px">

                <el-option v-for="item in cmThemeOptions" :key="item" :label="item" :value="item"></el-option>

            </el-select>

            <span style="margin-left: 10px">请选择编辑模式</span>

            <el-select v-model="cmEditorMode" placeholder="请选择" size="small" style="width:150px"
                @change="onEditorModeChange">

                <el-option v-for="item in cmEditorModeOptions" :key="item" :label="item" :value="item"></el-option>

            </el-select>

            <el-button type="primary" size="small" style="margin-left:10x" @click="setStyle">修改样式</el-button>

            <el-button type="primary" size="small" style="margin-left:10x" @click="getValue">获取内容</el-button>

            <el-button type="primary" size="small" style="margin-left:10x" @click="setValue">修改内容</el-button>

        </div>



        <code-mirror-editor ref="cmEditor" :cmTheme="cmTheme" :cmMode="cmMode" :autoFormatJson="autoFormatJson"
            :jsonIndentation="jsonIndentation"></code-mirror-editor>

    </div>

</template>



<script>

    // 使用时需要根据CodeMirrorEditor.vue的实际存放路径，调整from后面的组件路径，以便正确引用

    // import CodeMirrorEditor from "@/common/components/public/CodeMirrorEditor";
    import CodeMirrorEditor from './codeMirrorIDE'



    export default {
        name:'codeMirrorCom',
        components: {

             CodeMirrorEditor

        },

        data() {

            return {

                cmTheme: "default", // codeMirror主题

                // codeMirror主题选项

                cmThemeOptions: [

                    "default",

                    "3024-day",

                    "3024-night",

                    "abcdef",

                    "ambiance",

                    "ayu-dark",

                    "ayu-mirage",

                    "base16-dark",

                    "base16-light",

                    "bespin",

                    "blackboard",

                    "cobalt",

                    "colorforth",

                    "darcula",

                    "dracula",

                    "duotone-dark",

                    "duotone-light",

                    "eclipse",

                    "elegant",

                    "erlang-dark",

                    "gruvbox-dark",

                    "hopscotch",

                    "icecoder",

                    "idea",

                    "isotope",

                    "lesser-dark",

                    "liquibyte",

                    "lucario",

                    "material",

                    "material-darker",

                    "material-palenight",

                    "material-ocean",

                    "mbo",

                    "mdn-like",

                    "midnight",

                    "monokai",

                    "moxer",

                    "neat",

                    "neo",

                    "night",

                    "nord",

                    "oceanic-next",

                    "panda-syntax",

                    "paraiso-dark",

                    "paraiso-light",

                    "pastel-on-dark",

                    "railscasts",

                    "rubyblue",

                    "seti",

                    "shadowfox",

                    "solarized dark",

                    "solarized light",

                    "the-matrix",

                    "tomorrow-night-bright",

                    "tomorrow-night-eighties",

                    "ttcn",

                    "twilight",

                    "vibrant-ink",

                    "xq-dark",

                    "xq-light",

                    "yeti",

                    "yonce",

                    "zenburn"

                ],

                cmEditorMode: "default", // 编辑模式

                // 编辑模式选项

                cmEditorModeOptions: [

                    "default",

                    "json",

                    "sql",

                    "javascript",

                    "css",

                    "xml",

                    "html",

                    "yaml",

                    "markdown",

                    "python"

                ],

                cmMode: "application/json", //codeMirror模式

                jsonIndentation: 2, // json编辑模式下，json格式化缩进 支持字符或数字，最大不超过10，默认缩进2个空格

                autoFormatJson: true // json编辑模式下，输入框失去焦点时是否自动格式化，true 开启， false 关闭

            };

        },

        methods: {

            // 切换编辑模式事件处理函数

            onEditorModeChange(value) {

                switch (value) {

                    case "json":

                        this.cmMode = "application/json";

                        break;

                    case "sql":

                        this.cmMode = "sql";

                        break;

                    case "javascript":

                        this.cmMode = "javascript";

                        break;

                    case "xml":

                        this.cmMode = "xml";

                        break;

                    case "css":

                        this.cmMode = "css";

                        break;

                    case "html":

                        this.cmMode = "htmlmixed";

                        break;

                    case "yaml":

                        this.cmMode = "yaml";

                        break;

                    case "markdown":

                        this.cmMode = "markdown";

                        break;

                    case "python":

                        this.cmMode = "python";

                        break;

                    default:

                        this.cmMode = "application/json";

                }

            },

            // 修改样式（不推荐，建议参考<style>中的样式，提前配置好样式）

            setStyle() {

                let styleStr =

                    "position: absolute; top: 80px; left: 50px; right: 200px; bottom: 20px; padding: 2px; height: auto;";

                this.$refs.cmEditor.setStyle(styleStr);

            },

            //获取内容

            getValue() {

                let content = this.$refs.cmEditor.getValue();

                console.log(content);

            },

            //修改内容

            setValue() {

                let jsonValue = {

                    name: "laiyu",

                    addr: "广东省深圳市",

                    other: "nothing",

                    tel: "168888888",

                    intro: [{ item1: "item1" }]

                };



                this.$refs.cmEditor.setValue(JSON.stringify(jsonValue));

            }

        }

    };

</script>



<style>
    /* .CodeMirror {

        position: absolute;

        top: 80px;

        left: 2px;

        right: 5px;

        bottom: 0px;

        padding: 2px;

        height: auto;

        overflow-y: auto;

    } */
</style>



<style lang="scss" scoped>
    .code-mirror-div {

        position: absolute;

        top: 0px;

        left: 2px;

        right: 5px;

        bottom: 0px;

        padding: 2px;

        .tool-bar {

            top: 20px;

            margin: 30px 2px 0px 20px;

        }

    }
</style>